import React from 'react';
import { View,FlatList,StyleSheet,Image,Dimensions, ActivityIndicator} from 'react-native';
import { Container, Header, Content, Card, CardItem,Text, Thumbnail, Button, Icon, Left,Right,Body } from 'native-base';
import {getAllFlatListData,getPageFlatListData} from '../services/FlatListDataserveices'
import { fetchList,addCart,update,deleteCart} from "../actions"
import TimeAgo from 'react-native-timeago';
import FitImage from 'react-native-fit-image';
import {Actions} from 'react-native-router-flux'
let moment = require('moment');
require('moment/locale/zh-cn'); 
moment.locale('zh-cn');

import { connect } from 'react-redux'

const mapStateToProps=(state)=>{
    return{
        list:state.list.list
    }
}


class FlatListIem extends React.Component{
    addProductToCart=(list)=>{
        console.log('list',list); 
        // this.props.addCart(list);
    }
    render(){
        const {title,img,content,time,stars}=this.props.item;
        return(
            <Card style={{flex: 0}}>
            <CardItem>
              <Left>
                <Thumbnail source={{uri:img}} />
                <Body>
                  <Text>{title}</Text>
                  <Text note><TimeAgo time={time}/></Text>
                </Body>
              </Left>
            </CardItem>
            <CardItem>
            <FitImage resizeMode="cover" source={{uri:img}} style={styles.fitImage}/>
            </CardItem>
            <CardItem>
              <Body>
                <Text numberOfLines={3}>
                  {content}
                </Text>
              </Body>
            </CardItem>
            <CardItem>
              <Left>
                <Button transparent textStyle={{color: '#87838B'}}>
                  <Icon name="logo-github" />
                  <Text>￥{stars.number}元</Text>
                </Button>
              </Left>
              <Right>
                <Button rounded onPress={()=>{
                    Actions.detial(this.props)
                }}>
                    <Text>查看商品</Text>
                </Button>
              </Right>
            </CardItem>
            </Card>
        )
    }
}

class List extends React.Component{

    getlist(){
        const {rows,total}=this.props.list
        var jsx=[];
        if(rows!==undefined){
            for(var i=0;i<rows.length;i++){
                jsx.push(<FlatListIem key={i} {...rows[i]} addCart={this.props.addCart} update={this.props.update} deleteCart={this.props.deleteCart}/>)
            }
        }
        return jsx;
    }
    changePage=(i)=>{
        this.props.fetchList({page:i})
    }
    onChange=(page)=>{
        this.changePage(page);
    }
    componentDidMount(){
        this.props.fetchList();
    }
    constructor(props){
        super(props);
        this.state={
            flatListDataFromserver:[],
            page:1,
            isloadMore:false,
            loading:false
        }
    }
    makeRemoteRequest=()=>{
        this.setState({
            isloadMore:true,
            loading:true
        })
        getPageFlatListData({page:this.state.page}).then(data=>{
            this.setState({
                flatListDataFromserver:[...this.state.flatListDataFromserver,...data],
                isloadMore:false,
                loading:false
            })
        })
    }
    componentDidMount(){
       this.makeRemoteRequest();
    }
    _keyExtractor = (item, index) => item.id.toString();
    renderHeader =()=>{
        return(
          <View style={{backgroundColor:'orangered',width:'auto',height:30}}>
            <Text style={{lineHeight:30,fontSize:20,color:'white',textAlign:'center'}}>商品列表</Text>
          </View>
        )
      }
    loadMoreHanlder=()=>{
        if(!this.state.isloadMore){
            this.setState(prevState=>{
                return {
                    page:prevState.page+1
                }
            },()=>{
                this.makeRemoteRequest();
            })
        } 
    }
    renderFooter=()=>{
        if(this.state.loading) return null;
        return(
            <View 
            style={{
                paddingVertical:20,
                borderTopWidth:1,
                borderColor:'#e5e5e5'
            }}>
            <ActivityIndicator size="small" color="#00ff00" animating={true} />
            </View>
        )
    }
   render(){
       return(
        <View style={styles.container}>
                {this.getlist()}
               <FlatList
                data={this.state.flatListDataFromserver}
                keyExtractor={this._keyExtractor}
                ListHeaderComponent={this.renderHeader}
                ListFooterComponent={this.renderFooter}
                onEndReached ={this.loadMoreHanlder}
                onEndReachedThreshold={0.1}
                onChange={this.onChange} 
                pageSize={20}
                renderItem={({item,index}) =>{
                    return <FlatListIem item={item} index={index} />
                }}
                />
           </View>
       )
    }
}


export default connect(mapStateToProps,{fetchList,addCart,update,deleteCart})(List);










const styles=StyleSheet.create({
    container:{
        padding:20,
        backgroundColor:'#fff',
    }, 
    fitImage: {
        borderRadius: 20,
    },
    fitImageWithSize: {
        height: 100,
        width: 30,
    },
})